<template>
  <div class="app-container">
    <div v-show="show===1">
      <div style="margin: 10px 0">
        <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="getDoctorList">查询</el-button>
      </div>
      <personalMsg v-for="(doctor,index) in dataList"
                   :doctor-info="doctor"
                   @getDoctorInfo="Apply"> </personalMsg>
      <div class="classify-Pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <div v-show="show===2">
      <el-form ref="form" :model="form" label-width="80px">
        <h2>会诊专家信息</h2>
        <div style="display: flex">
          <el-form-item label="姓名:">
            <p>{{ selectedDoctor.name }}</p>
          </el-form-item>
          <el-form-item label="所在医院:">
            <p>{{selectedDoctor.hospitalName}}</p>
          </el-form-item>
          <el-form-item label="所在科室:">
            <p>{{selectedDoctor.departmentName}}</p>
          </el-form-item>
          <el-form-item label="擅长领域:">
            <p>{{selectedDoctor.major}}</p>
          </el-form-item>
          <el-form-item label="值班时间:">
            <p>{{selectedDoctor.spare}}</p>
          </el-form-item>
        </div>
        <el-form-item label="会诊时间">
          <el-col :span="11">
            <el-date-picker type="datetime" value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss' placeholder="选择日期" v-model="form.consultationTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <h2>请填写病人病历</h2>
        <div style="display: flex">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" type="number"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.gender"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </div>
        <div v-show="false">
          <input v-model="form.from">
          <input v-model="form.to">
        </div>
        <el-form-item label="主诉">
          <el-input type="textarea" v-model="form.disease"></el-input>
        </el-form-item>
        <el-form-item label="现有病史">
          <el-input type="textarea" v-model="form.history"></el-input>
        </el-form-item>
        <el-form-item label="既往病史">
          <el-input type="textarea" v-model="form.pastHistory"></el-input>
        </el-form-item>
        <el-form-item label="全身状况及其他">
          <el-input type="textarea" v-model="form.symptom"></el-input>
        </el-form-item>
        <el-form-item label="检查结果">
          <el-input type="textarea" v-model="form.result"></el-input>
        </el-form-item>
        <el-form-item label="既往治疗历史">
          <el-input type="textarea" v-model="form.cureHistory"></el-input>
        </el-form-item>
        <el-form-item label="上传影像资料">
          <el-upload
            :action="ipAddress+'/file/upload/'"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="filesUploadSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交会诊申请</el-button>
          <el-button @click="show=1">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getDoctor, consultationPost } from '@/api/doctor.js'
import personalMsg from '../answer/person/PersonalMsg'
import { getTimeNow } from '../../../../utils/myUtil'
import { mapGetters } from 'vuex'
export default {
  name: 'departmentManage',
  data() {
    return {
      dataList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      search: '',
      dialogImageUrl: '',
      dialogVisible: false,
      show: 1,
      form: {},
      selectedDoctor: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'ipAddress'])
  },
  components: {
    personalMsg
  },
  beforeMount() {
    this.getDoctorList()
  },
  methods: {
    getDoctorList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword: this.search === '' ? null : this.search
      }
      getDoctor(params).then((res) => {
        const data = res.data
        this.dataList = data.list
        this.pageNum = data.pageNum
        this.pageSize = data.pageSize
        this.total = data.total
      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.getDoctorList()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getDoctorList()
    },
    onSubmit() {
      if (!this.form.consultationTime) {
        this.$message({
          type: 'error',
          message: '请选择会诊时间'
        })
        return
      }
      if (!this.form.name || !this.form.age || !this.form.disease) {
        this.$message({
          type: 'error',
          message: '请完善病历信息'
        })
        return
      }
      this.form.createTime = getTimeNow()
      consultationPost(this.form).then((res) => {
        this.$message({
          type: 'success',
          message: res.data
        })
        this.show = 1
      })
    },
    Apply(info) {
      if (info.id === this.userInfo.id) {
        this.$message({
          type: 'error',
          message: '您不能向自己发送申请！'
        })
        return
      }
      this.selectedDoctor = info
      this.form.to = info.id
      this.form.from = this.userInfo.id
      this.form.images = ''
      this.show = 2
    },
    handleRemove(file) {
      const url = file.response.data
      const images = this.form.images.split(',')
      const left = images.filter(item => item !== url && item !== '')
      let res = ''
      // eslint-disable-next-line no-return-assign
      left.forEach(item => res += item + ',')
      this.form.images = res
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    filesUploadSuccess(res) {
      console.log(res)
      this.form.images += res.data + ','
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: scroll;
  max-width: 100vw;
  margin: 0 auto;
}
.classify-Pagination{
  padding-top: 10px;
  text-align:right;
  padding-right: 20px;
}
</style>
